<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/css/style.css">
    <script src="../lib/jquery/jquery.js"></script>
    <link rel="stylesheet" href="../lib/jstree/themes/default/style.min.css">
    <script src="../lib/layer/layer.js"></script>
<!--    <link rel="stylesheet" href="../lib/bootstrap-table/bootstrap-table.min.css">-->
<!--    <script src="../lib/bootstrap-table/bootstrap-table.min.js"></script>-->
<!--    <script src="../lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>-->
    <script src="../lib/jstree/jstree.js"></script>
    <style>
        html,body,#app{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box;
        }
        #app{
            display: flex;
            flex-direction: row;
            padding: 10px !important;
        }
        #jstree_demo, #dataList{
            height: 100%;
        }
        .fa-folder-o{
            color: #f90;
        }
        .fa-file-o{
            color: #00a0e8;
        }
        .manager-box{
            display: flex; flex-direction: row; align-items: center
        }
        #dataList{
            overflow: auto;
        }
    </style>
    <link rel="stylesheet" href="../lib/font/css/font-awesome.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <script src="../lib/vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input v-model="searchKey" type="text" style="width: 100%;margin-bottom: 8px;" placeholder="输入关键字进行搜索" id="search">
            <div id="jstree_demo" style="overflow:auto;">

            </div>
        </div>
        <div id="dataList" style="flex:1; padding: 10px;">
            <table class="table table-bordered">
                <tr>
                    <td>
                        名字：<input type="text" v-model="data.name">
                    </td>
                    <td>
                        排序：<input type="text" v-model="data.sort">
                    </td>
                </tr>
                <tr>
                    <td colspan="100" >
                        <div class="manager-box">
                            <span>部门主管：</span>
                            <input class="form-control" type="text" readonly style="background: #eee; flex:1" :value="managers">
                            <a href="javascript:;" style="margin-left: 10px;margin-right: 10px;" @click="addUser('ms')">添加</a>
                            <a href="javascript:;" @click="clearUsers('ms')">清空</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="100">
                        <div class="manager-box">
                            <span>上级主管领导：</span>
                            <input class="form-control" type="text" readonly style="background: #eee; flex:1" :value="topManagers0">
                            <a href="javascript:;" style="margin-left: 10px;margin-right: 10px;" @click="addUser('tms0')">添加</a>
                            <a href="javascript:;" @click="clearUsers('tms0')">清空</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="100">
                        <div class="manager-box">
                            <span>上级分管领导：</span>
                            <input class="form-control" type="text" readonly style="background: #eee; flex:1" :value="topManagers1">
                            <a href="javascript:;" style="margin-left: 10px;margin-right: 10px;" @click="addUser('tms1')">添加</a>
                            <a href="javascript:;" @click="clearUsers('tms1')">清空</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="100" valign="top" style="vertical-align: top">
                        描述：
                        <textarea class="form-control" v-model="data.info" rows="5"></textarea>
                    </td>
                </tr>
            </table>

            <p>人员</p>
            <div style="display: flex; flex-direction: row; align-items: flex-end">
                <textarea :value="users" class="form-control" name="" id="" rows="5" readonly style="background: #eee; flex:1">{{users}}</textarea>
                <a href="javascript:;" @click="addUser('us')" style="margin-right: 10px;margin-left: 10px;">添加</a>
                <a href="javascript:;" @click="clearUsers('us')">清空</a>
            </div>
            <div style="text-align: center; padding-top: 10px;">
                <a href="javascript:;" class="btn btn-primary" @click="save">保存</a>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var timer = null;
    new Vue({
        el:"#app",
        data:{
            searchKey: "",
            data:{
            }
        },
        watch:{
            searchKey: function (val) {
                var ins = $('#jstree_demo').jstree(true);
                ins.search(val, false, true);
            }
        },
        computed: {
            managers(){
                return Object.values(this.data.ms || {}).join(",");
            },
            topManagers0(){
                return Object.values(this.data.tms0 || {}).join(",");
            },
            topManagers1(){
                return Object.values(this.data.tms1 || {}).join(",");
            },
            users: function () {
                return Object.values(this.data.us || {}).join(",");
            }
        },
        methods:{
            save: function(){
                var t = this;
                var pid = this.data.parent_id;
                $.post("/api/bpm/org/save", JSON.stringify(this.data), function (msg) {
                    if(!msg.success){
                       return layer.msg(msg.errMessage);
                    }
                    for(var i in msg.data){
                        t.data[i] = msg.data[i];
                    }

                    var ins = $("#jstree_demo").jstree()
                    var node = ins.get_node(msg.data.id);
                    msg.data.text = msg.data.name;
                    if(!node){
                        var par = ins.get_node(pid);
                        if(par){
                            ins.create_node(par, msg.data);
                        }
                    } else {
                        ins.set_text(node, msg.data.text);
                    }

                    layer.msg("保存成功")
                },"json");
            },
            clearUsers: function(key){
                this.data[key] = {}
            },
            addUser:function(key){
                var t = this;
                window.onChooseInit = function(){
                    return t.data[key] || {};
                };
                window.onChooseCallback = function(selected){
                    Vue.set(t.data, key, selected);
                }
                window.open("./choose.html", "choose-user", "left=100, top=100, width=500, height=400, location=no, resizable=no")

            },
            init: function () {
                var t = this;
                $.get("/api/bpm/org/list", {type:"DEPARTMENT"}, function (msg) {
                    layer.closeAll();
                    if(!msg.success){
                        return
                    }
                    msg = msg.data;
                    if(msg.length){
                        msg[0].state = {
                            "opened": true
                        }
                    }

                    $('#jstree_demo').jstree({
                        "core" : {
                            "animation" : 0,
                            "check_callback" : true,
                            "themes" : { "stripes" : true },
                            'data' :[
                                {
                                    'id' : '',
                                    'text' : '全部分类',
                                    "type":"home",
                                    'state' : { 'opened' : true, 'selected' : true },
                                    'children' : (msg)
                                }
                            ]
                        },
                        'contextmenu': {
                            'select_node': false,
                            'items': function (node) {
                                var menu = {};
                                menu.createDep = {
                                    "label": "添加部门",
                                    "action": function(obj){
                                        t.data = {
                                            parent_id: node.id
                                        }
                                        // if(node.parents.length >= 2){
                                        //     layer.msg("最多只支持1级分类");
                                        //     return;
                                        // }
                                        // layer.load(0, {time: 5000});
                                        // $.get("/api/bpm/cat/formAdd", {pid: node.original.id || node.original.id,type:"0"}, function (msg) {
                                        //     layer.closeAll()
                                        //     if(!msg.success) return;
                                        //     msg = msg.data;
                                        //     console.log(msg)
                                        //     ins.create_node(node, msg);
                                        //     ins.open_node(node);
                                        // },"json")
                                    },
                                }
                                // if(node.type == 'cat' || node.type == 'home'){
                                // } else {
                                // }
                                // if(node.type == 'cat'){
                                //     menu.createForm = {
                                //         label: "添加表单",
                                //         action: function () {
                                //             var frame = $("#form-edit");
                                //             frame.data("id", "")
                                //                 .attr("src", "../form/form.add.html?pid=" + node.original.id + "&v=" + Math.random())
                                //                 .show()
                                //         }
                                //     }
                                //     menu.rename = {
                                //         "label": "重命名",
                                //         "action": function(obj) {
                                //             if(node.id == 'top'){
                                //                 layer.msg("顶级分类无法编辑");
                                //                 return;
                                //             }
                                //             $("#jstree_demo").jstree().edit(node);
                                //         }
                                //     }
                                // }
                                if(node.type == 'home'){
                                    menu.sync = {
                                       label:"同步部门人员",
                                       action: function () {
                                            layer.confirm("确定同步？", (index) => {
                                                layer.close(index);
                                                $.get("/api/bpm/org/sync", function () {
                                                    location.reload();
                                                },"json");
                                            });
                                       }
                                    }
                                }
                                if(node.type != 'home'){
                                    menu.delete = {
                                        "label": "删除",
                                        "action": function() {
                                            layer.confirm("确定删除？", function (index) {
                                                layer.close(index);
                                                $.get("/api/bpm/org/del",{id:node.id}, function (msg) {
                                                    if(!msg.success){
                                                        return layer.msg(msg.errMessage)
                                                    }
                                                    $("#jstree_demo").jstree().delete_node(node);
                                                },"json");
                                            });
                                        }
                                    }
                                }
                                return menu;
                            }
                        },
                        "types" : {
                            // "#": {
                            //     icon: "glyphicon glyphicon-book",
                            //     valid_children: ["home"]
                            // },
                            "home": {
                                icon: "fa fa-home",
                                valid_children: ["DEPARTMENT"]
                            },
                            "DEPARTMENT": {
                                icon: "fa fa-folder-o",
                                valid_children: ["DEPARTMENT", "QUARTERS"]
                            },
                            "QUARTERS": {
                                icon: "fa fa-file-o",
                                valid_children: []
                            }
                        },
                        // "#" : {
                        //     "max_children" : 1,
                        //     "max_depth" : 4,
                        //     "valid_children" : ["root"]
                        // },
                        // "root" : {
                        //     "icon" : "/static/3.3.8/assets/images/tree_icon.png",
                        //     "valid_children" : ["default"]
                        // },
                        // "default" : {
                        //     "valid_children" : ["default","file"]
                        // },
                        // "file" : {
                        //     "icon" : "glyphicon glyphicon-file",
                        //     "valid_children" : []
                        // }
                        // },
                        "plugins" : [
                            "contextmenu", "search",
                            // "state",
                            "dnd",
                            "types", "wholerow"
                        ]
                    });

                    window.ins = $('#jstree_demo').jstree();
                    // ins.open_all();
                    //选中第一个节点
                    // loadFormList('top')

                    $("#jstree_demo")
                    //     .on("rename_node.jstree", function (e,n) {
                    //     var name = n.text;
                    //     if(n.node.type != 'home'){
                    //         $.get("/api/bpm/cat/rename", {id: n.node.original.id, name: name});
                    //     }
                    // })
                        .on("select_node.jstree", function (e,n) {
                        var id = n.node.id;
                        if(!id){
                            return
                        }
                        layer.load(2);
                        $.get("/api/bpm/org/one", {id: id}, function (msg) {
                            layer.closeAll()
                            var data = msg.data || {}
                            // data.selected = {};
                            // data.ms = {};
                            // (data.us || []) .forEach(function (e) {
                            //     data.selected[e.uid] = e.utname
                            // });
                            Vue.set(t, "data", data);
                        }, "json");

                    }).on("move_node.jstree", function (e,d) {
                        $.get("/api/bpm/org/move",{id: d.node.id, pid: d.parent})
                    });;
                }, "json");
            }
        },
        mounted: function () {
            this.init()
        }
    });

</script>